<template>
    <div class="demo-collapse">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="解题思路" name="thinking">
                <div>
                    <div>
                        1.设置区间，将要查找的数位于哪个区间，找到区间边界，下边界为bottom，上边界为top，通过中间值进行查找mid=(bottom+top)/2;
                    </div>
                    <div>
                        2.比较target与arr[mid]的大小关系：
                    </div>
                    <div>
                        &nbsp;Ⅰ.如果target&lt;arr[mid],那么就让top=mid-1；在左半区进行查找。
                    </div>
                    <div>
                        &nbsp;Ⅱ.如果target>arr[mid],那么就让bottom=mid+1；在右半区进行查找。
                    </div>
                    <div>
                        &nbsp;Ⅲ.如果target=arr[mid]，那么就会查找查找成功返回mid值。
                    </div>
                    <div>
                        注意：进行查找时存在除法涉及的非整数，对于二分查找，无非是向上取整与向下取整，对于middle取整方向的选择，
                        却决于我们使用的区间类型。如果是左闭右开区间[l,r)，则向下取整，因为左边是闭区间，也就是说左边边界是可以取到的，
                        为了能取到左边界，我们必须向下取整；如果是左开右闭区间(l,r]，则向上取整，因为右边是闭区间，右边界可取到，
                        所以必须向上取整；而对于闭区间[l,r]，middle的取整方向是无所谓的，向上或向下取整都可以。
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="代码实现" name="code">
                <!-- <el-image style="width:100%" :src="url" :fit="fit" loading="lazy"></el-image> -->
                <div v-highlight>
                    <div>C/C++:</div>
                    <pre class="language-javascript">
                      <code>
                        #include &lt;stdio.h>
                            int binarySearch(int nums[],int numsSize,int target) {
                                int left = 0;//首元素下标
                                int right = numsSize - 1;//末元素的下标(总长度-1,数组从0开始)
                                
                                while (left &lt;= right) {
                                    int mid = left + (right - left) / 2;//中间元素的下标 防止溢出
                                    int numsMid = nums[mid];//中间元素
                                    //目标值大于中间元素时
                                    if (numsMid &lt; target) {
                                        //查找范围：[mid+1,right]
                                        left = mid + 1;
                                    }
                                    //目标值小于中间元素时
                                    else if (target &lt; numsMid) {
                                        //查找范围：[left,mid-1]
                                        right = mid - 1;
                                    }
                                    else return mid;//相等时直接返回该元素下标
                                }
                                return -1;//没有找到目标值,返回-1
                            }
                            void main() {
                                int nums[] = {-1,0,3,5,9,12};
                                int numsSize = sizeof(nums) / sizeof(nums[0]);//数组长度
                                int target = 0;//目标值target
                                scanf("%d",&target);
                                printf("下标：%d", binarySearch(nums,numsSize, target));
                            }
                            
                      </code>
                    </pre>
                </div>
                <div v-highlight>
                    <div>Python:</div>
                    <pre class="language-javascript">
                        <code>
                            def binary_search(alist, item):
                            if len(alist) == 0:
                                return False
                            else:
                                midpoint = len(alist)//2
                                if alist[midpoint]==item:
                                  return True
                                else:
                                  if item&lt;alist[midpoint]:
                                    return binary_search(alist[:midpoint],item)
                                  else:
                                    return binary_search(alist[midpoint+1:],item)
                        
                            testlist = [0, 1, 2, 8, 13, 17, 19, 32, 42,]
                            print(binary_search(testlist, 3))
                            print(binary_search(testlist, 13))
                     
                        </code>
                    </pre>
                </div>
                <div v-highlight>
                    <div>Java:</div>
                    <pre class="language-javascript">
                      <code>
                        public class binary_search {
 
                            public static void main(String[] args) {
                                int[] array = {1, 2, 33, 55, 66, 88, 99, 567, 789, 999,1000,10001,100002};
                            // index(array,item);
                                System.out.println("循环方法猜测数字的位置为："+index(array,33));
                                System.out.println("递归方法猜测数字的位置为："+binarySearch(array,0,array.length-1,33));
                            }
 
                        /**
                            * 循环的方法
                            * @param array
                            * @param key
                            * @return
                            */
                            public static int index(int array[],int key){
 
                                int low = 0;
                                int high = array.length - 1;
                                int middle = 0;
                            // int guess = array[middle];//猜测的数字
 
                                if (key &lt; array[low] || key > array[high] || low >high){
                                    return -1;
                                }
                                while (low &lt;=high){ //循环结束的条件是左边等于右边，那就是中间要找的数字
                                    middle = (low + high)/2;
                                    int guess = array[middle];//猜测的数字
                                    if (guess &lt; key){ //如果猜测的数字小于实际数字，low就要从middle+1开始
                                        low = middle + 1;
                                    }else if (guess > key){//如果猜测的数字大于实际数字，那么high就要从middle-1开始
                                        high = middle - 1;
                                    }else{
                                        return middle;
                                    }
 
                                }
                                return -1;
                            }
                            /***
                            *递归的方式
                            */
                            public static int binarySearch(int[] arrays,int low,int high,int key){
                                if (key &lt; arrays[low] || key > arrays[high] || low >high){
                                    return -1;
                                }
                                int middle = (low + high) / 2;
                                if (arrays[middle] > key){
                                return  binarySearch(arrays, low, middle - 1, key);
                                }else if (arrays[middle] &lt; key){
                                return  binarySearch(arrays, middle + 1, high, key);
                                }else{
                                    return middle;
                                }
 
                            }
                        }
                      </code>
                    </pre>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const activeNames = ref(['thinking'])
const handleChange = (val: string[]) => {
    console.log(val)
}
// 代码实现部分
import "vue-code-highlight/themes/prism-solarizedlight.css";
import "vue-code-highlight/themes/window.css";

</script>
